import moment from 'moment';
import React, { Component } from 'react';
import { Col, Modal, Row } from 'antd';
import { messages } from 'share/common';
import Condition from 'components/condition';
import { openModal, removeContainer } from 'components/method/openModal';
import 'styles/expense/mileage-modal.scss';

const { If } = Condition;

class MileageModal extends Component {

  renderMode = (value) => {
    if (value === 1001) {
      return messages('expense-1.key139')/*手工创建*/;
    }
    if (value === 1002) {
      return messages('expense-1.key140')/*定位创建*/;
    }
    return '-';
  };

  onCancel = () => {
    this.props.afterClose();
  };

  render() {
    const { visible, record } = this.props;
    return (
      <Modal
        visible={visible}
        title={messages('expense-1.key146')/*里程明细*/}
        footer={null}
        onCancel={this.onCancel}
        className="mileage-detail-modal">
        <Row>
          <Col span={4}>{messages('expense-1.key136')/*创建方式*/}：</Col>
          <Col span={20}>{this.renderMode(record && record.createdMode)}</Col>
        </Row>
        <Row>
          <Col span={4}>{messages('expense-1.key147')/*上车时间*/}:</Col>
          <Col span={20}>{record && moment(record.departTime).format('YYYY-MM-DD HH:mm')}</Col>
        </Row>
        <Row>
          <Col span={4}>{messages('expense-1.key148')/*上车地点*/}:</Col>
          <Col span={20}>
            <section className="mileage-detail-point">
              <div>{record && record.start.place}</div>
              <If value={record && record.originStart}>
                <div className="mileage-detail-point_origin">
                  {messages('expense-1.key141')/*[原定位]*/}{record && record.originStart && record.originStart.place}
                </div>
              </If>
            </section>
          </Col>
        </Row>

        <If value={record && record.viaPoints && record.viaPoints[0]}>
          <Row>
            <Col span={4}>{messages('expense-1.key149')/*途径信息*/}</Col>
            <Col span={20}>
              {record && record.viaPoints && record.viaPoints.map(value => {
                return (
                  <section className="mileage-detail-point">
                    <div>
                      {moment(value.arrivalTime)
                        .format('YYYY-MM-DD HH:mm')}
                    </div>
                    <div>
                      {value.place}
                    </div>
                    <If value={value.originPoint}>
                      <div className="mileage-detail-point_origin">
                        {messages('expense-1.key141')/*[原定位]*/}{value.originPoint && JSON.parse(value.originPoint).place}
                      </div>
                    </If>
                  </section>
                );
              })}
            </Col>
          </Row>
        </If>
        <Row>
          <Col span={4}>{messages('expense-1.key150')/*下车时间*/}:</Col>
          <Col span={20}>{record && moment(record.arriveTime)
            .format('YYYY-MM-DD HH:mm')}</Col>
        </Row>
        <Row>
          <Col span={4}>{messages('expense-1.key151')/*下车地点*/}:</Col>
          <Col span={20}>
            <section className="mileage-detail-point">
              <div>{record && record.end.place}</div>
              <If value={record && record.originEnd}>
                <div className="mileage-detail-point_origin">
                  {messages('expense-1.key141')/*[原定位]*/}{record && record.originEnd && record.originEnd.place}
                </div>
              </If>
            </section>
          </Col>
        </Row>
        <Row>
          <Col
            span={6}>{messages('expense-1.key152',{arg1: this.props.mileageAllowance.mileageAllowanceOrders[0].mileageUnit})/*实际里程({arg1})*/}:</Col>
          <Col span={18}>{record && record.mileage.toFixed(2)}</Col>
        </Row>
        <If value={record && record.travelMileage}>
          <Row>
            <Col span={6}>{messages('expense-1.key153')/*行驶里程*/}:</Col>
            <Col span={18}>{(record && record.travelMileage || 0).toFixed(2)}</Col>
          </Row>
        </If>
        <Row>
          <Col
            span={6}>{messages('expense-1.key154',{arg1: this.props.mileageAllowance.mileageAllowanceOrders[0].mileageUnit})/*参考里程({arg1})*/}:</Col>
          <Col span={18}>{record && record.referenceMileage.toFixed(2)}</Col>
        </Row>
        <Row>
          <Col span={4}>{messages('common.accountIncident')/*事由说明*/}:</Col>
          <Col span={20}>{record && record.remark || '-'}</Col>
        </Row>
      </Modal>
    );
  }
}


MileageModal.open = async function (props, env) {
  await new Promise(resolve => {
    let container;
    const targetProps = {
      ...props,
      visible: true,
      loadWhenMount: true,
      onOk: data => close(data.result),
      onCancel: () => close(null),
      afterClose: () => {
        removeContainer(container);
        container = null;
      }
    };

    function close(data) {
      resolve(data);
      openModal(MileageModal, {
        ...targetProps,
        visible: false
      }, env, container);
    }

    container = openModal(MileageModal, targetProps, env);
  });
};


MileageModal.propTypes = {};

export default MileageModal;
